<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <base href="<%=basePath%>"/>
    <title>Index</title>

    <jsp:include page="../header.jsp"></jsp:include>

    <script type="text/javascript">
        $(function () {

            $("#addPaymentCategory").click(function () {
                showPaymentCategoryPanel();
            });

            $(".form_datetime").datepicker({
                format: "yyyy-mm-dd",
                autoclose: true,
            });

            var total = <s:property value="total"/>;

            $("#paymentCategoryFund").bind('input propertychange', function () {
                var value = $(this).val();
                if (value === '') {
                    $("#paymentCategoryPercent").val('');
                } else {
                    $("#paymentCategoryPercent").val((value / total * 100).toFixed(2));
                }
            });

            $("#paymentCategoryPercent").bind('input propertychange', function () {
                var percent = $(this).val();
                if (percent === '') {
                    $("#paymentCategoryFund").val('');
                } else {
                    $("#paymentCategoryFund").val((percent * total / 100).toFixed(2));
                }
            });
        });

        function showPaymentPanel(total, paymentCategoryId, id, name, value, date, liable, input) {
            $("#paymentValue").unbind('input propertychange');
            $("#paymentPercent").unbind('input propertychange');

            $("#paymentValue").bind('input propertychange', function () {
                var value = $(this).val();
                if (value === '') {
                    $("#paymentPercent").val('');
                } else {
                    $("#paymentPercent").val((value / total * 100).toFixed(2));
                }
            });

            $("#paymentPercent").bind('input propertychange', function () {
                var percent = $(this).val();
                if (percent === '') {
                    $("#paymentValue").val('');
                } else {
                    $("#paymentValue").val((percent * total / 100).toFixed(2));
                }
            });

            $("#paymentPanel [name='payment.id']").val(id);
            $("#paymentPanel [name='payment.paymentCategory.id']").val(paymentCategoryId);
            $("#paymentPanel [name='payment.name']").val(name);
            $("#paymentPanel [name='payment.value']").val(value);
            $("#paymentValue").trigger('propertychange');
            $("#paymentPanel [name='payment.date']").val(date);
            $("#paymentPanel [name='payment.liable']").val(liable);
            $("#paymentPanel [name='payment.input']").val(input);
            $("#paymentPanel").modal();
        }

        function showPaymentCategoryPanel(id, name, fund) {
            $("#paymentCategoryPanel [name='paymentCategory.id']").val(id);
            $("#paymentCategoryPanel [name='paymentCategory.name']").val(name);
            $("#paymentCategoryPanel [name='paymentCategory.fund']").val(fund);
            $("#paymentCategoryFund").trigger('propertychange');
            $("#paymentCategoryPanel").modal();
        }
    </script>
</head>
<body>
<jsp:include page="../top.jsp"></jsp:include>

<div class="container theme-showcase" role="main">

    <div class="alert alert-success">
        <h2>支付历史 - <s:property value="project.name"/> （总金额<s:property value="project.fund"/>元，剩余<s:property
                value="remain"/>元） </h2>
    </div>
    <div class="well">
        <div>
            <a class="btn btn-success" id="addPaymentCategory">添加款项</a>
            <a class="btn btn-default" href="project/listProject">返回项目列表</a>
        </div>
    </div>

    <div id="paymentList">
        <div class="panel-group" id="accordion">
            <s:iterator value="paymentCategoryList" var="pc">
                <div class="panel panel-default">
                    <div class="panel-heading" data-toggle="collapse"
                         href="#collapse<s:property value='#pc.id'/>">
                        <a class="accordion-toggle"><s:property value="#pc.name"/>
                            总金额<s:property value="#pc.fund"/>元（<s:property value="#pc.fund/total*100"/>%），剩余<s:property value="remainMap[#pc]"/>元
                        </a>
                    </div>
                    <div id="collapse<s:property value='#pc.id'/>" class="panel-collapse collapse"
                         style="height: 0px;">
                        <div class="panel-body">
                            <a class="btn btn-success" href="javascript:void(0);"
                               onclick="showPaymentPanel('<s:property value="#pc.fund"/>','<s:property value="#pc.id"/>');">添加支付</a>
                            <a class="btn btn-primary" href="javascript:void(0);"
                               onclick="showPaymentCategoryPanel('<s:property value="#pc.id"/>','<s:property value="#pc.name"/>','<s:property value="#pc.fund"/>');">修改款项</a>
                            <a class="btn btn-danger" href="payment/deletePaymentCategory?paymentCategory.id=<s:property value='#pc.id'/>"
                               onclick="return confirm('确认删除吗？');"">删除款项</a>
                            <table class="table table-hover">
                                <tr>
                                    <th>支付名称</th>
                                    <th>金额</th>
                                    <th>支付日期</th>
                                    <th>责任人</th>
                                    <th>录入人</th>
                                    <th>操作</th>
                                </tr>
                                <s:iterator value="#pc.paymentList" var="d">
                                    <tr>
                                        <td><s:property value="#d.name"/></td>
                                        <td>
                                            <s:property value="#d.value"/>元 （<s:property value="#d.value/total*100"/>%）
                                        </td>
                                        <td><s:date name="#d.date" format="yyyy-MM-dd"/></td>
                                        <td><s:property value="#d.liable"/></td>
                                        <td><s:property value="#d.input"/></td>
                                        <td>
                                            <div class="btn-group" role="group">
                                                <button type="button" class="btn btn-primary dropdown-toggle"
                                                        data-toggle="dropdown" aria-haspopup="true"
                                                        aria-expanded="false">
                                                    操作 <span class="caret"></span>
                                                </button>
                                                <ul class="dropdown-menu">
                                                    <li><a href="javascript:void(0);"
                                                           onclick="showPaymentPanel('<s:property value="#pc.fund"/>','<s:property value="#pc.id"/>','<s:property value="#d.id"/>','<s:property
                                                                   value="#d.name"/>','<s:property value="#d.value"/>','<s:date
                                                                   name="#d.date" format="yyyy-MM-dd"/>','<s:property value="#d.liable"/>',
                                                                   '<s:property value="#d.input"/>');">修改</a></li>
                                                    <li role="separator" class="divider"></li>
                                                    <li><a
                                                            href="payment/deletePayment?payment.id=<s:property value='#d.id'/>"
                                                            onclick="return confirm('确认删除吗？');">删除</a></li>
                                                </ul>
                                            </div>
                                        </td>
                                    </tr>
                                </s:iterator>
                            </table>
                        </div>
                    </div>
                </div>
            </s:iterator>
        </div>
        <div class="modal fade" id="paymentPanel" tabindex="-1" role="dialog"
             aria-labelledby="myModalLabel" aria-hidden="true">
            <form action="payment/savePayment" method="post">
                <input type="hidden" name="payment.id"/>
                <input type="hidden" name="payment.paymentCategory.id"/>
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal"
                                    aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                            <h4 class="modal-title">支付信息</h4>
                        </div>
                        <div class="modal-body">
                            <h4>
                                <ul class="list-group">
                                    <li class="list-group-item"><label> 支付名称 </label> <input
                                            type="text" class="form-control" name="payment.name"
                                            placeholder="支付名称"/></li>
                                    <li class="list-group-item"><label> 金额 </label> <input id="paymentValue"
                                            type="number" class="form-control" name="payment.value"
                                            placeholder="金额"/></li>
                                    <li class="list-group-item"><label> 百分比 % </label> <input id="paymentPercent"
                                            type="number" class="form-control" step="0.000001"
                                            placeholder="百分比"/></li>
                                    <li class="list-group-item"><label> 支付日期 </label>
                                        <div class="input-append date form_datetime">
                                            <input size="16" type="text" class="form-control" value="" name="payment.date"
                                                   placeholder="支付日期" readonly>
                                            <span class="add-on"><i class="icon-th"></i></span>
                                        </div>
                                    </li>
                                    <li class="list-group-item"><label> 责任人 </label> <input
                                            type="text" class="form-control" name="payment.liable"
                                            placeholder="责任人"/></li>
                                    <li class="list-group-item"><label> 录入人 </label> <input
                                            type="text" class="form-control" name="payment.input"
                                            placeholder="录入人"/></li>
                                </ul>
                            </h4>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-success">保存</button>
                            <button type="button" class="btn btn-default"
                                    data-dismiss="modal">取消
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>

        <div class="modal fade" id="paymentCategoryPanel" tabindex="-1" role="dialog"
             aria-labelledby="myModalLabel" aria-hidden="true">
            <form action="payment/savePaymentCategory" method="post">
                <input type="hidden" name="paymentCategory.id"/>
                <input type="hidden" name="paymentCategory.project.id" value="<s:property value='project.id'/>"/>
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal"
                                    aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                            <h4 class="modal-title">款项信息</h4>
                        </div>
                        <div class="modal-body">
                            <h4>
                                <ul class="list-group">
                                    <li class="list-group-item"><label> 款项名称 </label> <input
                                            type="text" class="form-control" name="paymentCategory.name"
                                            placeholder="款项名称"/></li>
                                    <li class="list-group-item"><label> 总金额 </label> <input id="paymentCategoryFund"
                                                                                           type="number" class="form-control" name="paymentCategory.fund"
                                                                                           placeholder="金额"/></li>
                                    <li class="list-group-item"><label> 百分比 % </label> <input id="paymentCategoryPercent"
                                                                                              type="number" step="0.000001" class="form-control"
                                                                                              placeholder="百分比"/></li>
                                </ul>
                            </h4>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-success">保存</button>
                            <button type="button" class="btn btn-default"
                                    data-dismiss="modal">取消
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<jsp:include page="../footer.jsp"></jsp:include>
</body>
</html>
